<template>
  <div class="mt-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,idx) in menuList" :key="idx" @mouseenter="enter">
        <i :class="item.icon" />
        {{item.name}}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="kind">
      <template v-for="(item,idx) in curdetail.child">
        <div :key="idx" class="title">
          <h2><nuxt-link to="/item.title" class="detailTitle">{{item.title}}</nuxt-link></h2>
          <span class="more">
            <nuxt-link to="/more" class="detailMore">{{item.more}}</nuxt-link>
            <i class="narrow"></i>
          </span>
        </div>
        <div :key="idx+1" class="detailCon">
          <span v-for="vitem in item.children" :key="vitem">{{vitem}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      kind: "",
      menuList: [
        {
          icon: "food",
          name: "美食",
          child: [
            {
              title: "美食",
              more: "更多",
              children: ["代金券", "甜点饮品", "自助", "火锅", "小吃快餐"]
            }
          ]
        },
        {
          icon: "takeout",
          name: "外卖",
          child: [
            {
              title: "外卖",
              more: "更多",
              children: ["美团外卖"]
            }
          ]
        },
        {
          icon: "hotel",
          name: "酒店",
          child: [
            {
              title: "酒店星级",
              more: "更多",
              children: ["经济型", "舒适/三星", "高档/四星", "豪华/五星"]
            }
          ]
        },
                {
          icon: "food",
          name: "美食",
          child: [
            {
              title: "美食",
              more: "更多",
              children: ["代金券", "甜点饮品", "自助", "火锅", "小吃快餐"]
            }
          ]
        },
        {
          icon: "takeout",
          name: "外卖",
          child: [
            {
              title: "外卖",
              more: "更多",
              children: ["美团外卖"]
            }
          ]
        },
        {
          icon: "hotel",
          name: "酒店",
          child: [
            {
              title: "酒店星级",
              more: "更多",
              children: ["经济型", "舒适/三星", "高档/四星", "豪华/五星"]
            }
          ]
        }
      ]
    };
  },
  watch: {},
  computed: {
    curdetail: function() {
      //filter获取到的是一个数组
      console.log(this.menuList.filter(item => item.icon === this.kind)[0]);
      return this.menuList.filter(item => item.icon === this.kind)[0];
    }
  },
  methods: {
    mouseleave() {
      // let self = this;
      // self._timer = setTimeout(function() {
      //   self.kind = "";
      // }, 150);
      this.kind = "";
    },
    enter(e) {
      // this.kind = e.target.queryselector('i').className
      this.kind = e.target.querySelector("i").className;
      console.log("当前hover", this.kind);
      // console.log('过滤后的',this.curdetail)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>